<!-- pages/map/map.vue -->
<template>
	<view class="container">
		<!-- <cover-view class="search" v-if="code == firstCode">
			<navigator url="/pages/search/search" class="search-item">
				<view class="search-title">湘东区</view>
				<view class="vertical"></view>
				<view class="input">请输入辖区...</view>
			</navigator>
			<view class="switch" @click="changtap()">
				<image style='height: 60rpx;width: 60rpx;' mode="aspectFill" class="icon"
					:src="meptype ? '../static/qh.png' : '../static/qh.png'" />
			</view>
		</cover-view> -->
		<view v-if="!meptype" class="map" :style="'height:' + heightShow + 'vh;'" @click="closePop()">
			<map class="map-item" :style="'height:' + (heightShow) + 'vh;'" :longitude="longitude" :latitude="latitude"
				:markers="markers" :scale='12' @markertap="getLocationInfo">
				<cover-view class="search" v-if="code == firstCode">
					<cover-view class="search-item">
						<cover-view class="search-title" @click="to_search">湘东区</cover-view>
						<cover-view class="vertical" @click="to_search"></cover-view>
						<cover-view class="input" @click="to_search">请输入辖区...</cover-view>
					</cover-view>
					<cover-view class="switch" @click="changtap()">
						<cover-image style='height: 40rpx;width: 40rpx;' mode="aspectFill" class="icon"
							:src="meptype ? '../static/qh.png' : '../static/qh.png'" />
					</cover-view>
				</cover-view>

				<!-- 处理事件的弹窗 -->
				<cover-view class="pop" v-if="isShowPop" @click="closePop">
					<!-- <cover-image mode="aspectFill" class="pop-img" src="../static/logo.png"></cover-image> -->
					<cover-view class="exit" @click="closePop">x</cover-view>
					<cover-view class="pop-title">{{firstAddress}}</cover-view>
					<cover-view class="pop-title">{{secondAddress}}</cover-view>
					<cover-view class="pop-name" @click="call">{{name}}{{phone}}</cover-view>
					<cover-view class="pop-content">
						<cover-view class="pop-item">
							<cover-view class="item-title">已接收: </cover-view>
							<cover-view class="item-content">{{total}}</cover-view>
							<cover-view class="item-content1">件</cover-view>
						</cover-view>
						<cover-view class="pop-item">
							<cover-view class="item-title">未处理: </cover-view>
							<cover-view class="item-content">{{handle}}</cover-view>
							<cover-view class="item-content1">件</cover-view>
						</cover-view>
						<cover-view class="pop-item">
							<cover-view class="item-title">已处理:</cover-view>
							<cover-view class="item-content">{{finish}}</cover-view>
							<cover-view class="item-content1">件</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="info" style=" width: 60%; margin: 0 auto; background-color: #EEE;text-align: center; height: 60rpx; line-height: 60rpx;" @click="getInfo">查看详细</cover-view>
				</cover-view>
				<!-- <view class="map-tip" @click="changeHeight">您可拖动地图, 查看辖区精确位置</view> -->
				<view class="position" @click="getLocation()">
					<view class="on-box">
						<view class="in-box"></view>
					</view>
				</view>
			</map>
		</view>
		<!-- 地图事件详情图标开始 -->
		<view v-if="meptype" class="map" :style="'height:' + heightShow + 'vh;'" @click="closePop">
			<map class="map-item" :style="'height:' + (heightShow) + 'vh;'" :longitude="longitude" :latitude="latitude"
				:markers="markers2" @markertap="getdetailsInfo()" @regionchange="closePop()">
				<cover-view class="search" v-if="code == firstCode">
					<cover-view class="search-item">
						<cover-view class="search-title" @click="to_search">湘东区</cover-view>
						<cover-view class="vertical" @click="to_search"></cover-view>
						<cover-view class="input" @click="to_search">请输入辖区...</cover-view>
					</cover-view>
					<cover-view class="switch" @click="changtap()">
						<cover-image style='height: 40rpx;width: 40rpx;' mode="aspectFill" class="icon"
							:src="meptype ? '../static/qh.png' : '../static/qh.png'" />
					</cover-view>
				</cover-view>
				<!-- <view class="map-tip" @click="changeHeight">您可拖动地图, 查看辖区精确位置</view> -->
				<view class="position" @click="getLocation">
					<view class="on-box">
						<view class="in-box"></view>
					</view>
				</view>
			</map>
		</view>
		<!-- 地图事件详情图标结束 -->
		<view class="location-list" :style="'height:calc(' + (100 - heightShow) + 'vh);'" v-if="code != 0">
			<view class="move" @click="changeHeight">点击查看辖区</view>
			<scroll-view class="show-location-list" scroll-y enable-flex
				:style="'height: calc(' + (100 - heightShow) + 'vh - 50rpx);'">
				<view class="move" @click="changeHeight">点击查看辖区</view>
				<view class="show-location-item" v-for="(item, index) in addressList" :key="index"
					@click="getLocationItem(item.longitude, item.latitude)">
					<image mode="aspectFill" class="icon" src="../static/icon.png" />
					<view class="show-location">{{item.address}}</view>
					<image mode="aspectFill" class="icon" src="../static/arrow.png" />
				</view>
			</scroll-view>
		</view>
		<!-- 具体事件的弹窗 -->
		<view class="pop" v-if="isdetailsShowPop">
			<image mode="aspectFill" class="pop-img" src="../static/logo.png"></image>
			<view class="exit" @click="detailsclosePop">×</view>
			<view class="pop-title">{{firstAddress + '/' + secondAddress}}</view>
			<view class="pop-name" @click="call">{{name}}{{phone}}</view>
			<view class="pop-content">
				<view class="pop-item">
					<view class="item-title">已接收: </view>
					<view class="item-content">{{total}}</view>
					<view class="item-content1">件</view>
				</view>
				<view class="pop-item">
					<view class="item-title">未处理: </view>
					<span class="item-content">{{handle}}</span>
					<view class="item-content1">件</view>
				</view>
				<view class="pop-item">
					<view class="item-title">已处理:</view>
					<span class="item-content">{{finish}}</span>
					<view class="item-content1">件</view>
				</view>
			</view>
			<button class="info" @click="getInfo">查看详细</button>
		</view>
	</view>
</template>

<script>
	import {
		getAllAddressList,
		getMapIcon,
		getDetailMapIcon,
		getAddressInfo,
		getSecondAddressList
	} from "../api/address_api"
	// import {
	//   logincode
	// } from "../../apis/login_api"
	// import {
	//   getResultsByAdviseId
	// } from "../../apis/results_api"
	import {
		getToken
	} from '@/utils/auth'
	import {
		get
	} from "https"
	export default {
		data() {
			return {
				code: 0,
				// 默认高度
				heightShow: 100,
				// 一级权限代码
				firstCode: getApp().globalData.firstCode,
				// 二级权限代码
				secondCode: getApp().globalData.secondCode,
				// 经度
				longitude: 113.8738,
				// 纬度
				latitude: 27.640671,
				// 辖区列表
				addressList: [],
				// 查询辖区列表结果
				searchAddressList: [],
				// 图标列表信息
				markers: [],
				// 详细事件图标列表信息
				markers2: [],
				// 一级辖区
				firstAddress: "",
				// 二级辖区
				secondAddress: "",
				// 标题
				address: "",
				// 已接收
				total: 0,
				// 已处理
				finish: 0,
				// 未处理
				handle: 0,
				// 显示弹窗
				isShowPop: false,
				// 显示具体事件弹窗
				isdetailsShowPop: false,
				// 显示具体事件详情
				Specificevents: [],
				// 显示地图列表
				isShowLocationList: false,
				// 显示地图类型
				meptype: false,
				// 管理员姓名
				name: "管理员",
				// 管理员手机号
				phone: "13697003363",
			}
		},
		methods: {
			//自动跳转电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},

			// 修改地图高度
			changeHeight() {
				console.log('111111')
				// let heightShow = this.heightShow
				if (this.heightShow == 70) {
					this.heightShow = 20
				} else {
					this.heightShow = 70
				}
			},

			// 跳转页面查看详情
			getInfo() {
				let secondAddress = this.secondAddress
				uni.navigateTo({
					url: '/pages/myRelease/myRelease?address=' + secondAddress,
				})
			},

			// 获取点位信息
			getLocationInfo(e) {
				console.log(e)
				let id = e.detail.markerId
				getAddressInfo(id).then(res => {
					console.log(res)
					this.firstAddress = res.data.firstAddress
					this.secondAddress = res.data.secondAddress
					this.total = res.data.total
					this.handle = res.data.untreatedNum
					this.finish = res.data.accomplishNum
					this.isShowPop = true
					this.isShowLocationList = false
					this.name = res.data.name
					this.phone = res.data.phone
				})
			},

			// 关闭弹窗
			closePop() {
				this.isShowPop = false
				this.isdetailsShowPop = false
				this.heightShow = 70
			},
			detailsclosePop() {
				this.isdetailsShowPop = false
			},

			// 跳转地图
			getLocationItem(longitude, latitude) {
				this.longitude = longitude
				this.latitude = latitude
			},

			//获取用户定位
			getLocation() {
				// uni.getLocation({
				//   type: 'wgs84',
				//   success: res => {
				//     this.longitude = res.longitude + 0.006
				//     this.latitude = res.latitude - 0.004
				//   },
				//   fail: err => {
				//     uni.showToast({
				//       title: '定位失败',
				//       icon: 'none',
				//       duration: 1500
				//     })
				//   }
				// })
			},

			//请求获取地图点位
			getMapIcon(addressList) {
				let greenIcon = "../../static/green_marker.png"
				let yellowIcon = "../static/yellow_marker.png"
				let redIcon = "../static/red_marker.png"
				getMapIcon(greenIcon, yellowIcon, redIcon, addressList).then(res => {
					this.markers = res.data
					console.log(this.markers)
				})
			},

			// 获取详细事件地图标点
			gettoDetailMapIcon() {
				let greenIcon = "../static/green_marker.png"
				getDetailMapIcon(greenIcon).then(res => {
					console.log(res.data)
					this.markers2 = res.data
					console.log(this.markers2)
				})
			},

			// 切换具体事件地图
			changtap() {
				this.meptype = !this.meptype
				console.log(this.meptype)
			},

			// 一级管理员获取所有辖区
			getAllAddressList() {
				getAllAddressList().then(res => {
					console.log(res)
					this.addressList = res.data
					this.searchAddressList = res.data
				})
			},

			// 通过id获取具体信息
			getdetailsInfo(e) {
				let id = e.markerId
				console.log(id)
				uni.navigateTo({
					url: '/pages/handle/handle?id=' + id,
				})
			},

			// 获取二级管理员辖区列表
			getSecondAddressList(addressList) {
				getSecondAddressList(addressList).then(res => {
					this.addressList = res.data
				})
			},

			// 初始化页面数据
			getPageData(options) {
				let code = uni.getStorageSync('code')
				// let code = getApp().globalData.secondCode
				if (code == getApp().globalData.firstCode) {
					this.getAllAddressList()
					this.getMapIcon()
					this.gettoDetailMapIcon()
					this.heightShow = 70
					this.code = code
				} else if (code == getApp().globalData.secondCode) {
					let addressList = uni.getStorageSync("addressList")
					this.getMapIcon(addressList)
					this.getSecondAddressList(addressList)
					this.heightShow = 70
					this.code = code
				} else {
					this.heightShow = 100
					this.code = code
				}
				this.getLocation()
			},
			wxlogin() {
				let phone = uni.getStorageSync('phoneNumber')
				uni.login({
					success: res => {
						console.log(res)
						if (res.code) {
							logincode(res.code, phone).then(res => {
								console.log(res)
							})
						} else {
							console.log('获取用户登录态失败！' + res.errMsg)
						}
					}
				})
			},
			to_search() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		},
		onLoad(options) {
			this.getPageData(options)
			// console.log(getToken())
			uni.showLoading({
			     title: '地图板块加载中'
			   });
			   setTimeout(()=>{
                 uni.hideLoading()
			   },5000)
			
		}
	}
</script>

<style scoped>
	/* 样式请根据实际需要调整 */
	.container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.search {
		height: 120rpx;
		width: 85vw;
		padding: 0 5vw;
		margin: 8vh 4vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		z-index: 100;
	}

	.search-item {
		width: 80vw;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #fff;
		display: flex;
	}

	.search-title {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.vertical {
		height: 100%;
		width: 1px;
		background-color: #ccc;
	}

	.input {
		flex: 3;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		color: #808080;
	}

	.map {
		width: 100vw;
		overflow: hidden;
		transition: height 0.5s;
	}

	.map-item {
		width: 100vw;
		position: relative;
		transition: height 0.5s;
	}

	.position {
		width: 80rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 50%;
		position: absolute;
		bottom: 15vh;
		right: 5vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.on-box {
		width: 31rpx;
		height: 31rpx;
		border: 1rpx solid #3095f9;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.in-box {
		width: 18rpx;
		height: 18rpx;
		background: #3095f9;
		border-radius: 50%;
	}

	.location-list {
		position: relative;
		transition: height 0.5s;
	}

	.change-button {
		position: absolute;
		top: 0px;
		left: 35vw;
		z-index: 1;
		width: 30vw;
		height: 30rpx;
		background-color: #ccc;
		border-radius: 0 0 10rpx 10rpx;
	}

	.location-item {
		width: 94vw;
		padding: 0 3vw;
		height: 120rpx;
		display: flex;
	}

	.location-item:nth-child(1) {
		margin-top: 30rpx;
	}

	.location-logo {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo-img {
		height: 40rpx;
		width: 40rpx;
	}

	.location-content {
		flex: 6;
		height: 120rpx;
		line-height: 120rpx;
		overflow: hidden;
		font-size: 32rpx;
	}

	.pop {
		position: absolute;
		height: 40vh;
		width: 70vw;
		padding: 5vh 0;
		background-color: #fff;
		top: 20vh;
		left: 15vw;
		border-radius: 20rpx;
		z-index: 100;
	}

	.exit {
		position: absolute;
		height: 40rpx;
		width: 40rpx;
		border-radius: 20rpx;
		background-color: rgb(0, 0, 0, 0.3);
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		right: 25rpx;
		margin-top: 25rpx;
	}

	.pop-img {
		position: absolute;
		height: 400rpx;
		width: 400rpx;
		bottom: 0;
		right: 0;
		opacity: 0.2;
		z-index: -1;
	}

	.pop-title {
		width: 60vw;
		padding: 0 5vw;
		line-height: 5vh;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.pop-name {
		width: 60vw;
		padding: 0 5vw;
		height: 30rpx;
		line-height: 20rpx;
		text-align: center;
		font-size: 25rpx;
	}

	.pop-content {
		width: 50vw;
		padding: 0 10vw;
		font-size: 32rpx;
		height: 20vh;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		z-index: 1;
	}

	.pop-item {
		display: flex;
	}

	.item-title {
		flex: 4;
		text-align: center;
	}

	.item-content {
		margin-top: 5rpx;
		flex: 1;
		text-align: center;
	}

	.item-content1 {
		flex: 1;
		text-align: center;
	}

	.location-list {
		width: 100vw;
		background-color: #f0f0f0;
		position: relative;
	}

	.move {
		width: 50vw;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #707070;
		text-align: center;
		background: #fff;
		border-radius: 0 0 10rpx 10rpx;
		position: absolute;
		top: -50rpx;
		left: 25vw;
		z-index: 9;
	}

	.show-location-list {
		margin-top: 50rpx;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}

	.show-location-item {
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 10rpx;
		padding: 0 3vw;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #fff;
	}

	.show-location {
		width: 90vw;
		height: 100rpx;
		line-height: 100rpx;
	}

	.icon {
		height: 30rpx;
		width: 30rpx;
		padding: 10rpx;
	}

	.switch {
		margin-left: 20rpx;
	}
</style>
